import Tittle from "../Tittle";
import Radio, { Group as RadioGroup } from "@ui/RJMart/radio";
import Input from "@ui/RJMart/input";
import ZenModal from "@module/../components/ZenUI/ZenModal/ZenModal";

import "./style.scss";

class Relationship extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            radioValue: ""
        };
        this.inputValue=""
    }

    componentDidMount() {}

   

    showModal = () => {
        function closeModal(value) {
            console.log("run closeModal", value);
            modal.hide();
        }

        function Content(props) {
            props.item.passParams && props.item.passParams("abc");
            return (
                <div className="zen_fs-12 zen_646464">
                    <p>
                        采购人及经费负责人已阅知“廉洁告知”事项。在本次实验材料采购中：
                    </p>
                    <br />
                    <p>1、存在关联关系（请详细描述关联关系）</p>
                    <br />
                    <p>2、不存在关联关系</p>
                    <br />
                    <p>说明：</p>
                    <br />
                    <p className="zen_l-h-22">
                        1.“关联关系”指采购人及所用经费项目中相关人员与所选用供应商之间存在直接或间接的权益或利害关系。包括但不限于采购人、经费负责人、项目组其他成员等为所选用供应商的法定代表人、股东、合伙人、雇员或存在直系亲属关系等的相关关联情况；
                    </p>
                    <br />
                    <p>2.如存在关联关系，请具体说明存在何种关联情况。</p>
                    <br />
                    <p className="zen_l-h-22">
                        廉洁告知：不得隐瞒关联关系。严禁利用实验材料采购为经费相关人员及其亲属违规谋取利益。如隐瞒实验材料采购中隐瞒关联关系，其责任由项目经费负责人和项目组承担。
                    </p>
                    <div className="zen_t-c zen_m-t-45">
                        <span
                            className="zen_cur-p zen_p-h-40 zen_p-v-10 zen_bg-0093EB zen_bdr-4 zen_white"
                            onClick={closeModal}
                        >
                            知道了
                        </span>
                    </div>
                </div>
            );
        }
        let options = {
            header: "关联关系声明",
            modalClass:"zen_bdr-5",
            content: Content,
            size: "md",
            hideFooter: true,
            close: closeModal
        };
        let modal = ZenModal.loadModal(options);
        modal.show();
    };

    //ratio change事件
    handleChange=(e)=> {
        console.log("当前选中:", e.target.value);
        this.inputValue = undefined;
        this.inputValue = e.target.value=='1' ?'':this.inputValue;

        this.setState({ radioValue: e.target.value },this.props.cb(e.target.value,this.inputValue)
        );
    };

    onBlur=(e)=>{
        this.inputValue = e.target.value;
        this.props.cb(this.state.radioValue,e.target.value)
    }

    render() {
        const { radioValue } = this.state;
        return (
            <div className="rj_l-relation">
                <div className="rj_l-relation-wp">
                    <Tittle text="与供应商的关联关系说明" />
                    <div className="rj_chose">
                        <RadioGroup
                            onChange={this.handleChange}
                            value={radioValue}
                            name="relationStatus"
                        >
                            <Radio value="1">不存在关联关系</Radio>
                            <Radio value="2">存在关联关系</Radio>
                        </RadioGroup>
                        {radioValue == "2" && (
                            <Input onBlur={this.onBlur}  size="normal" clearable placeholder="" />
                        )}
                        <span
                            onClick={this.showModal}
                            className="zen_0093EB zen_fs-12 zen_cur-p"
                        >
                            《关联关系声明》
                        </span>
                    </div>
                </div>
            </div>
        );
    }
}

export default Relationship;
